import { Component } from "react";
import "./style.scss";
import Swiper from "../../components/Swiper";
import NavBar from "../../components/NavBar";
import Film from "./components/Film";
import TabBar from "../../components/TabBar";
interface Props {}
interface State {}
class Index extends Component<Props, State> {
  state = {
    headerStyle: { position: "relative", top: "-45px" },
    active: 0,
  };
  componentDidMount(): void {
    document.addEventListener("scroll", () => {
      let distance = document.documentElement.scrollTop;
      if (distance >= 210) {
        this.setState({
          headerStyle: { position: "fixed", top: "0px" },
        });
      } else {
        this.setState({
          headerStyle: { position: "relative", top: "-45px" },
        });
      }
    });
  }
  changeTabs = (active: number) => {
    this.setState({
      active,
    });
  };
  render() {
    const { headerStyle, active } = this.state;
    return (
      <>
        {/* swiper轮播图组件 */}
        <Swiper></Swiper>

        <header style={headerStyle as object}>
          {/* header */}
          <NavBar title="风神电影"></NavBar>

          {/* tabs */}
          <div className="tabs">
            <div
              className={`item ${active || "active"}`}
              onClick={() => this.changeTabs(0)}
            >
              正在热映
            </div>
            <div
              className={`item ${active && "active"}`}
              onClick={() => this.changeTabs(1)}
            >
              即将上映
            </div>
            <div className="line" style={{ left: ["0%", "50%"][active] }}>
              <span></span>
            </div>
          </div>
        </header>

        {/* Film */}
        <Film type={this.state.active + 1}></Film>

        {/* tabBar */}
        <TabBar></TabBar>
      </>
    );
  }
}
export default Index;
